<template>
	<view style="background-color: #F8F8F8;">
		<view class="topbox">
			<view class="t1">
				<view class="">
					<image src="https://jiejinda.oss-cn-beijing.aliyuncs.com/26f10e4328373bc863e8fc9ebc74bd2e0de6fca026121dde8ab8a95ff48cba40.png" mode="widthFix"></image>
					<view class="">资金账户</view>
				</view>
				<view class="">
					<image src="https://jiejinda.oss-cn-beijing.aliyuncs.com/26f10e4328373bc863e8fc9ebc74bd2e0de6fca026121dde8ab8a95ff48cba40.png" mode="widthFix"></image>
					<view class="">赠送帐户</view>
				</view>
			</view>
			<view class="t2">
				<view class="">
					 <view class="">可用余额</view>
					 <view class="num">{{wallet.balance}}</view>
				</view>
				<view class="">
					 <view class="">冻结余额</view>
					 <view class="num">{{wallet.freezeBalance}}</view>
				</view>
				<view class="line"></view>
				<view class="">
					 <view class="">赠送余额  </view>
					 <view class="num">{{wallet.giveBalance}}</view>
				</view>
				<view class="">
					 <view class="">赠送冻结余额</view>
					 <view class="num">{{wallet.giveFreezeBalance}}</view>
				</view>
			</view>
			<view class="t1">
				<view class="">
					<view class="woodsbtn" style="border: 1px solid #fff;width: 160rpx;height: 64rpx;"
					 @click="tourl('/pages/my/integral/recharge')">
						充值
					</view>
				</view>
				<view style="justify-content: flex-end;"  @click="tourl('/pages/my/integral/cashwithdrawal')">
					<view class="">提现申请</view>
					<image src="@/static/right.png" mode="widthFix" style="width: 28rpx;"></image>
				</view>
			</view>
		</view>
		
		<view class="selectbox">
			<view class="selectplus">
				<view class="s1 flex" @click="show = true">
					{{date || '日期选择'}} <u-icon name="arrow-down-fill" color="#AAA" size="15"></u-icon>
				</view>
				
				<view class="s1 flex" @click="show2 = true">
					{{typeinfo.name}}  <u-icon name="arrow-down-fill" color="#AAA" size="15"></u-icon>
				</view>
			</view>
			
			<integralList v-model="list" :integralType="2"/>
		</view>
		 
		<u-action-sheet :actions="selectlist" @select="selectClick" @close='show2=false'
		:show="show2" cancelText="取消"></u-action-sheet> 
		
		<u-datetime-picker :show="show" mode="year-month" @confirm="onSelect" :closeOnClickOverlay="true"
		@cancel="show=false" v-model="defaultValue" :minDate="minDate" :maxDate="maxDate"></u-datetime-picker>
		
	</view>
</template>

<script>
	import { getwalletAPI,transactionwalletAPI} from "@/api/user.js"
	import integralList from "../components/integral-list.vue"
	import {DateFormatter} from "@/utils/dateFormat.js"
	import pageing from "@/mixins/pageing.js"
	export default {
		mixins:[pageing],
		components:{
			integralList
		},
		data() {
			return {
				wallet:{
					balance:"",
					freezeBalance:"",
					giveBalance:"",
					giveFreezeBalance:"",
				},
				list:[],
				show:false,
				show2:false,
				typeinfo:{
					id:"",
					name:'全部'
				},
				date:'',
				selectlist: [
					{	
						id:"",
						name:'全部'
					},{
						id:"1",
						name: '增加记录'
					},{
						id:"2",
						name: '减少记录'
					}
				],
				defaultValue: null,
				minDate:Number(new Date((new Date().getFullYear() - 5)+"-"+new Date().getMonth())),
				maxDate: Number(new Date())
			}
		},
		created() {
			this.defaultValue = this.getDefaultValue();
			
			this.getlist()
		},
		onShow() {
			this.getwallet()
		},
		onBackPress() {
			uni.switchTab({
				url:'/pages/my/my'
			})
		},
		methods: {
			getDefaultValue() {
				const now = new Date();
				return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
			},
			getwallet(){
				getwalletAPI().then(res=>{
					this.wallet=res
				})
			},
			getlist(){
				transactionwalletAPI({
					"pageNo": this.pageNo,
					"pageSize":  this.pageSize ,
					createTime:this.date,
					type:this.typeinfo.id
				}).then(res=>{
					this.total=res.total
					this.list=this.list.concat(res.list)
				})
			},
			onSelect({value}){
				this.date=DateFormatter.formatYearMonth(value)
				this.show=!this.show
				this.pageNo=1
				this.list=[]
				this.getlist()
 			},
			selectClick(val){
				this.typeinfo=val
				this.pageNo=1 
				this.list=[]
				this.getlist()
			},
		}
	}
</script>

<style lang="scss" scoped>
.topbox{
	background-color: $uni-color-primary;
	padding:30rpx;
	border-radius: 0 0 20rpx 20rpx;
	.t1{
		display: flex;
		justify-content: center;
		align-items: center;
		>view{
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			  
			view{
				 
				color: #fff;
				font-weight: 500;
				font-size: 28rpx;
				text-align: center;
				display: flex;
				align-items: center;
			}
			image{
				width: 40rpx;
				height: 40rpx;
				margin: 0 10rpx;
			}
		}
	}
	
	.t2{
		display: flex;
		align-items: center;
		justify-content: space-between;
		view{
			 
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 48rpx;
			text-align: center;
			 
		}
		.num{
			font-weight: 800;
			font-size: 42rpx;
		}
		.line{
			width: 1rpx;
			height: 200rpx; 
			border-left: 3rpx solid #EEEEEE;
			// opacity: 0.5;
		}
	}

}

.selectbox{
	background-color: #FFFFFF;
	margin-top: 30rpx;
	border-radius: 20rpx 20rpx 0 0;
}
.selectplus{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: #EEEEEE 1px solid;
	 
	view{
		color: #666666;
	}
}
</style>
